<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>眼科疾病智能诊断系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <header class="text-center my-4 fade-in">
            <div class="d-flex justify-content-center align-items-center position-relative">
                <h1><i class="bi bi-eye-fill me-2"></i>眼科疾病智能诊断系统</h1>
                <button class="btn btn-outline-primary position-absolute" id="ai-chat-btn" style="right: 20px; transform: translateY(75%)">
                    <i class="bi bi-chat-dots-fill me-1"></i>AI问答
                </button>
            </div>
            <p class="text-light mt-2">基于深度学习的眼底图像分析平台</p>
        </header>

        <!-- 四象限布局 -->
        <div class="grid-container">
            <!-- 第一象限：图片上传区域 -->
            <div class="grid-item" id="upload-section">
                <div class="card h-100">
                    <div class="card-header">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#single-eye" type="button">
                                    <i class="bi bi-eye me-2"></i>单眼模式
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#both-eyes" type="button">
                                    <i class="bi bi-eyeglasses me-2"></i>双眼模式
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content">
                            <!-- 单眼模式 -->
                            <div class="tab-pane fade show active" id="single-eye" role="tabpanel">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0">图像上传</h6>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="batch-mode-single" checked>
                                        <label class="form-check-label" for="batch-mode-single">批量处理</label>
                                    </div>
                                </div>
                                <div id="single-eye-upload" class="upload-container">
                                    <!-- 单张上传模式 -->
                                    <div class="single-upload-mode">
                                        <div id="single-preview-container" class="preview-container">
                                            <img id="single-image-preview" class="preview-image d-none" alt="预览图">
                                            <div class="upload-placeholder">
                                                <i class="bi bi-cloud-arrow-up"></i>
                                                <p>点击或拖拽上传眼底图像</p>
                                            </div>
                                        </div>
                                        <input type="file" class="d-none" id="single-image-input" accept=".jpg,.jpeg,.png">
                                    </div>
                                    <!-- 批量上传模式 -->
                                    <div class="batch-upload-mode d-none">
                                        <div class="folder-upload-container">
                                            <i class="bi bi-folder-plus"></i>
                                            <p>选择图片文件夹</p>
                                        </div>
                                        <input type="file" class="d-none" id="single-folder-input" webkitdirectory directory>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 双眼模式 -->
                            <div class="tab-pane fade" id="both-eyes" role="tabpanel">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0">双眼图像上传</h6>
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="batch-mode-both" checked>
                                        <label class="form-check-label" for="batch-mode-both">批量处理</label>
                                    </div>
                                </div>
                                <div class="row g-3">
                                    <!-- 左眼 -->
                                    <div class="col-6">
                                        <div id="left-eye-upload" class="upload-container">
                                            <div class="single-upload-mode">
                                                <div id="left-preview-container" class="preview-container">
                                                    <img id="left-eye-preview" class="preview-image d-none" alt="左眼预览">
                                                    <div class="upload-placeholder">
                                                        <i class="bi bi-cloud-arrow-up"></i>
                                                        <p>左眼图像</p>
                                                    </div>
                                                </div>
                                                <input type="file" class="d-none" id="left-image-input" accept=".jpg,.jpeg,.png">
                                            </div>
                                            <div class="batch-upload-mode d-none">
                                                <div class="folder-upload-container">
                                                    <i class="bi bi-folder-plus"></i>
                                                    <p>选择左眼图片文件夹</p>
                                                </div>
                                                <input type="file" class="d-none" id="left-folder-input" webkitdirectory directory>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 右眼 -->
                                    <div class="col-6">
                                        <div id="right-eye-upload" class="upload-container">
                                            <div class="single-upload-mode">
                                                <div id="right-preview-container" class="preview-container">
                                                    <img id="right-eye-preview" class="preview-image d-none" alt="右眼预览">
                                                    <div class="upload-placeholder">
                                                        <i class="bi bi-cloud-arrow-up"></i>
                                                        <p>右眼图像</p>
                                                    </div>
                                                </div>
                                                <input type="file" class="d-none" id="right-image-input" accept=".jpg,.jpeg,.png">
                                            </div>
                                            <div class="batch-upload-mode d-none">
                                                <div class="folder-upload-container">
                                                    <i class="bi bi-folder-plus"></i>
                                                    <p>选择右眼图片文件夹</p>
                                                </div>
                                                <input type="file" class="d-none" id="right-folder-input" webkitdirectory directory>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第二象限：病人信息 -->
            <div class="grid-item" id="patient-info-section">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-person-vcard me-2"></i>病人信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0">信息输入</h6>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="batch-patient-info">
                                <label class="form-check-label" for="batch-patient-info">批量信息</label>
                            </div>
                        </div>
                        
                        <!-- 单个病人信息输入表单 -->
                        <div id="single-patient-form-container">
                            <form id="patient-form" class="row g-3">
                                <div class="col-md-6">
                                    <label for="patient-id" class="form-label">病历号</label>
                                    <input type="text" class="form-control" id="patient-id">
                                </div>
                                <div class="col-md-6">
                                    <label for="patient-name" class="form-label">姓名</label>
                                    <input type="text" class="form-control" id="patient-name">
                                </div>
                                <div class="col-md-6">
                                    <label for="patient-gender" class="form-label">性别</label>
                                    <select class="form-select" id="patient-gender">
                                        <option value="">请选择</option>
                                        <option value="男">男</option>
                                        <option value="女">女</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="patient-age" class="form-label">年龄</label>
                                    <input type="number" class="form-control" id="patient-age" min="0" max="120">
                                </div>
                            </form>
                        </div>
                        
                        <!-- 批量病人信息上传 -->
                        <div id="batch-patient-form-container" class="d-none">
                            <div class="upload-excel-container mb-3">
                                <div class="text-center p-4 border rounded" id="excel-upload-area">
                                    <i class="bi bi-file-earmark-spreadsheet display-4 text-primary"></i>
                                    <p class="mt-2">请上传包含病人信息的Excel文件</p>
                                    <p class="small text-muted">支持的文件格式: .xlsx, .xls</p>
                                    <button class="btn btn-outline-primary mt-2" id="excel-upload-btn">
                                        <i class="bi bi-upload me-1"></i>选择文件
                                    </button>
                                    <a href="/static/templates/patient_template.xlsx" class="btn btn-link" download>
                                        <i class="bi bi-download me-1"></i>下载模板
                                    </a>
                                </div>
                                <input type="file" class="d-none" id="excel-file-input" accept=".xlsx,.xls">
                            </div>
                            
                            <!-- 显示已上传的Excel信息 -->
                            <div id="excel-info" class="d-none">
                                <div class="alert alert-success">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <i class="bi bi-check-circle-fill me-2"></i>
                                            <span id="excel-filename">已上传文件</span>
                                        </div>
                                        <button class="btn btn-sm btn-outline-danger" id="remove-excel-btn">
                                            <i class="bi bi-x"></i>
                                        </button>
                                    </div>
                                    <div class="mt-2 small">
                                        <span id="patient-count">0</span> 位病人信息
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 显示匹配状态 -->
                            <div id="matching-status" class="d-none">
                                <div class="alert alert-info">
                                    <i class="bi bi-info-circle-fill me-2"></i>
                                    <span id="matching-info">准备匹配图片和病人信息</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第三象限：疾病介绍 -->
            <div class="grid-item result-section" id="disease-info-section">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-info-circle me-2"></i>疾病信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <div id="disease-info-content">
                            <!-- 疾病信息将通过JavaScript动态填充 -->
                            <div class="text-center text-muted">
                                <i class="bi bi-arrow-up-circle display-4"></i>
                                <p class="mt-3">请先上传眼底图像进行分析</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 第四象限：AI诊断结果 -->
            <div class="grid-item result-section" id="diagnosis-section">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="bi bi-graph-up me-2"></i>AI诊断结果
                        </h5>
                    </div>
                    <div class="card-body">
                        <div id="diagnosis-content">
                            <!-- 诊断结果将通过JavaScript动态填充 -->
                            <div class="diagnosis-chart-container">
                                <canvas id="diagnosis-chart"></canvas>
                            </div>
                            <div id="confidence-info" class="mt-3">
                                <!-- 置信度信息将通过JavaScript动态填充 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons mt-4">
            <button id="start-analysis" class="btn btn-lg btn-primary" disabled>
                <i class="bi bi-play-circle me-2"></i>开始分析
            </button>
            <button id="reset-all" class="btn btn-lg btn-outline-secondary ms-2">
                <i class="bi bi-arrow-counterclockwise me-2"></i>重置
            </button>
        </div>

        <!-- 进度条 -->
        <div class="progress mt-4" style="height: 25px;">
            <div id="analysis-progress" class="progress-bar progress-bar-striped progress-bar-animated"
                 role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
        </div>
    </div>

    <!-- JavaScript 库引用 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/socket.io-client@4.5.4/dist/socket.io.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
    <script src="https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    <script src="{{ url_for('static', filename='js/upload.js') }}"></script>
    <script src="{{ url_for('static', filename='js/patient-info.js') }}"></script>
    <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
</body>
</html> 